<!-- 导航 -->
<template>
  <!-- unfold参数 控制导航收放 -->
  <el-aside
    class="nav_bl"
    :width="unfold?(64+'px'):(200+'px')"
  >
    <el-menu
      unique-opened
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="rgb(64, 158, 255)"
      :collapse="unfold"
      :default-active="activeIndex"
      :collapse-transition="true"
      router
    >
      <div
        class="bu_unfold"
        @click="unfold = !unfold"
      >
        <i class="el-icon-s-unfold" />
      </div>
      <!-- 二级导航 -->
      <div
        v-for="item in menulist"
        :key="item.id"
      >
        <!-- 判断是多项还是单项和是否有权限 -->
        <el-submenu
          v-if="item.hasOwnProperty('children') && isPower(item.id)" 
          :index="item.id + ''"
        >
          <template slot="title">
            <i :class="icoList[item.id]" /><span
              v-show="!unfold"
              class="title"
            >{{ item.authName }}</span>
          </template>
          <el-menu-item
            v-for="it in item.children"
            v-show="isPower(it.id)"
            :key="it.id"
            :index="it.path"
          >
            {{ it.authName }}
          </el-menu-item>
        </el-submenu>
        <el-menu-item
          v-else-if="isPower(item.id)"
          :index="item.path"
        >
          <i :class="icoList[item.id]" /><span
            v-show="!unfold"
            class="title"
          >{{ item.authName }}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </el-aside>
</template>

<!-- 导航 -->
<script>
    export default {
        data() {
            return {
                activeIndex: '/manage/content/banner',
                menulist: [{
                        id: '2',
                        authName: '首页(banner)',
                        path: 'banner'
                    }, { // 左侧菜单数据
                        id: '3',
                        authName: '关于DIDC',
                        children: [
                            {
                                id: '31',
                                authName: '集团简介',
                                path: 'table_aboutus'
                            },
                            {
                                id: '32',
                                authName: '空间展示',
                                path: 'table_show'
                            },
                            {
                                id: '33',
                                authName: '大事记',
                                path: 'table_events'
                            },
                            {
                                id: '34',
                                authName: '增值服务',
                                path: 'table_serve'
                            },
                            {
                                id: '35',
                                authName: '合作伙伴',
                                path: 'table_partner'
                            }
                        ]
                    },
                    {
                        id: '4',
                        authName: '活动精选',
                        path: 'news'
                    },
                    {
                        id: '5',
                        authName: '会员天地',
                        children: [{
                                id: '51',
                                authName: '会员活动',
                                path: 'active'
                            },
                            {
                                id: '52',
                                authName: '加入会员',
                                path: 'joinUs'
                            },
                            {
                                id: '53',
                                authName: '会员须知',
                                path: 'notice'
                            },
                            {
                                id: '54',
                                authName: '积分兑换',
                                path: 'conversion'
                            }
                        ]
                    },
                    {
                        id: '6',
                        authName: '关于我们',
                        path: 'news',
                        children: [{
                                id: '61',
                                authName: '项目简介',
                                path: 'synopsis'
                            },
                            {
                                id: '62',
                                authName: '交通指南',
                                path: 'traffic'
                            },
                            {
                                id: '63',
                                authName: '招商租赁',
                                path: 'attract'
                            },
                            {
                                id: '64',
                                authName: '场地合作',
                                path: 'site'
                            },
                            {
                                id: '65',
                                authName: '联系我们',
                                path: 'contact'
                            }
                        ]
                    }
                ],
                icoList: { // 左侧图标
                    2: 'iconfont icon-xiantiao-shouye',
                    3: 'iconfont icon-31pinpai',
                    4: 'iconfont icon-huodong',
                    5: 'iconfont icon-huiyuan_',
                    6: 'iconfont icon-guanyuwomen'
                },
                unfold: false, //是否收起
                menu:[] //导航权限
            }            
        },
        mounted: function () {
            var hash = location.hash.split('/')            
            hash = hash[hash.length - 1]
            this.activeIndex = hash

            this.getContentPower(); //获取内容导航权限
        },
        methods:{
          //获取导航权限数据
          getContentPower:async function(){
            const {data:res} = await this.$http.get('roles');
            this.menu = res.find(function(item){//sessionStorage
              return item.username === sessionStorage.getItem('username')
            }).content.split(',') 
          },
          //权限开头
          isPower:function(id){    
            this.menu.ddd = id       
            return true //this.menu.includes(id)
          }           
        }

    }

</script>
<style scoped>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }

    .iconfont {
        margin-right: 6px;
        font-size: 18px;
    }
    .nav_bl {background: rgb(84, 92, 100);}
    
</style>
